<template>
  <div class="weather-forecast">
    <ul class="weather-forecast-info">
      <li v-for="(cast, index) in casts" :key="index">
        <span>{{ cast.week | week(weeks) }}</span>
        <span>{{ cast.date | date }}</span>
        <span>{{ cast.dayweather }}</span>
        <span>风力 {{ cast.daypower }}级</span>
      </li>
    </ul>
    <echarts chart-id="weather" :option="weatherOptions"></echarts>
  </div>
</template>

<script>
import Echarts from './coms/Echarts'
import { getCity, getAdcode, getForecasts } from '@/api/weather'

export default {
  name: 'WeatherForecasts',
  components: { Echarts },
  filters: {
    week(w, weeks) {
      let nowWeek = new Date().getDay()
      nowWeek = nowWeek == 0 ? 7 : nowWeek
      switch (Number(w)) {
        case nowWeek:
          return '今天'
        case nowWeek + 1:
          return '明天'
        default:
          return weeks[Number(w) - 1]
      }
    },
    date(d) {
      return d.substr(5, 5)
    }
  },
  data() {
    return {
      city: '',
      adcode: '',
      forecasts: '',
      weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      weatherOptions: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            name: '白天气温',
            data: [],
            type: 'line',
            smooth: true,
            label: {
              show: true,
              color: '#fff',
              formatter(data) {
                return `白${data.value}℃`
              }
            }
          },
          {
            name: '晚上气温',
            data: [],
            type: 'line',
            smooth: true,
            label: {
              show: true,
              position: 'bottom',
              color: '#fff',
              formatter(data) {
                return `晚${data.value}℃`
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    casts() {
      return this.forecasts.casts
    },
    isAdcode() {
      return this.$route.params.adcode
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      //获取所在ip城市
      const getCityRes = await getCity()
      this.city = getCityRes.data.city
      //获取城市adcode
      const getAdcodeRes = await getAdcode(this.city)
      this.adcode = getAdcodeRes.data.geocodes[0].adcode
      //通过adcode获取近期天气
      const getForecastsRes = await getForecasts(
        this.isAdcode ? this.isAdcode : this.adcode
      )
      this.forecasts = getForecastsRes.data.forecasts[0]
      const daytemp = this.forecasts.casts.map(item => {
        return item.daytemp
      })
      const nighttemp = this.forecasts.casts.map(item => {
        return item.nighttemp
      })
      const temp = [daytemp, nighttemp]
      this.weatherOptions.series.forEach((item, index) => {
        item.data = temp[index]
      })
    }
  }
}
</script>

<style scoped>
.weather-forecast {
  padding: 40px 48px 0;
  margin-top: 8px;
  border-radius: 5px;
  background: #004e71;
}
.weather-forecast-info {
  display: flex;
  gap: 1.5rem;
}
.weather-forecast-info li {
  flex: 1;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  text-align: center;
}
</style>
